<div fxLayout="row wrap" fxLayoutGap="12px grid">
  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="load_time / 1000 | number: '0.3-3'"
      icon="group_add"
      backgroundcolor="linear-gradient(-134deg, #8C99E0 0%, #6572B8 100%)"
      textcolor="white"
      property="平均加载耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>
  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="white_time | number: '0.3-3'"
      icon="pageview"
      backgroundcolor="linear-gradient(-134deg, #4DD0E2 0%, #4CA8BA 100%)"
      textcolor="white"
      property="平均白屏耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="dom_time | number: '0.3-3'"
      icon="monetization_on"
      backgroundcolor="linear-gradient(-134deg, #81C683 0%, #62A864 100%)"
      textcolor="white"
      property="平均DOM构建耗时"
      changeicon="trending_down"
      valuesubfix="s"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="count"
      icon="playlist_add"
      backgroundcolor="linear-gradient(-134deg, #EAC459 0%, #DCAC3F 100%)"
      textcolor="white"
      property="调用次数"
      changeicon="trending_up"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="analysisDom_time | number: '0.3-3'"
      icon="group_add"
      backgroundcolor="linear-gradient(-134deg, #ff6e40 0%, #8e24aa 100%)"
      textcolor="white"
      property="平均解析DOM耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="dns_time | number: '0.3-3'"
      icon="pageview"
      backgroundcolor="linear-gradient(45deg, #FF5252 0%, #f48fb1 100%)"
      textcolor="white"
      property="平均DNS解析耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="tcp_time | number: '0.3-3'"
      icon="monetization_on"
      backgroundcolor="linear-gradient(45deg, #ff6f00 0%, #ffca28 100%)"
      textcolor="white"
      property="平均TCP连接耗时"
      changeicon="trending_down"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="request_time | number: '0.3-3'"
      icon="playlist_add"
      backgroundcolor="linear-gradient(45deg, #43A047 0%, #1de9b6 100%)"
      textcolor="white"
      property="平均request请求耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="ready_time | number: '0.3-3'"
      icon="playlist_add"
      backgroundcolor="linear-gradient(to bottom right,#8200fb,#c000ff)"
      textcolor="white"
      property="平均页面准备耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>
</div>

<div class="m-t-12 m-b-12">
  <div fxLayout="row wrap" fxLayoutGap="12px grid">
    <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
      <mat-card>
        <mat-card-header>
          <mat-card-title>浏览器分类统计</mat-card-title>
        </mat-card-header>
        <mat-card-content class="chart-container">
          <ngx-charts-pie-chart
            *ngIf="dataBrowserChart?.length"
            [results]="dataBrowserChart"
            [legend]="showLegend"
            [labels]="showLabels"
            [doughnut]="doughnut"
          >
          </ngx-charts-pie-chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
      <mat-card>
        <mat-card-header>
          <mat-card-title>系统分类统计</mat-card-title>
        </mat-card-header>
        <mat-card-content class="chart-container">
          <ngx-charts-pie-chart
            *ngIf="dataBrowserChart?.length"
            [results]="dataBrowserChart"
            [legend]="showLegend"
            [labels]="showLabels"
            [doughnut]="doughnut"
          >
          </ngx-charts-pie-chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
      <mat-card>
        <mat-card-header>
          <mat-card-title>地理位置分类统计</mat-card-title>
        </mat-card-header>
        <mat-card-content class="chart-container">
          <ngx-charts-pie-chart
            *ngIf="dataBrowserChart?.length"
            [results]="dataBrowserChart"
            [legend]="showLegend"
            [labels]="showLabels"
            [doughnut]="doughnut"
          >
          </ngx-charts-pie-chart>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

<stbui-search
  placeholder="输入资源名称"
  class="mat-elevation-z4 m-b-16"
></stbui-search>

<div class="mat-elevation-z4">
  <div class="table-container">
    <table class="table-hover" mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="url">
        <th mat-header-cell *matHeaderCellDef>URL</th>
        <td mat-cell *matCellDef="let element">{{ element.url }}</td>
      </ng-container>

      <ng-container matColumnDef="load_time">
        <th mat-header-cell *matHeaderCellDef>页面加载时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.load_time / 1000 | number: '0.3-3' }}s
        </td>
      </ng-container>

      <ng-container matColumnDef="white_time">
        <th mat-header-cell *matHeaderCellDef>白屏时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.white_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="dom_time">
        <th mat-header-cell *matHeaderCellDef>DOM构建时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.dom_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="analysisDom_time">
        <th mat-header-cell *matHeaderCellDef>解析dom耗时</th>
        <td mat-cell *matCellDef="let element">
          {{ element.analysisDom_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="dns_time">
        <th mat-header-cell *matHeaderCellDef>DNS解析时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.dns_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="tcp_time">
        <th mat-header-cell *matHeaderCellDef>TCP连接时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.tcp_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="redirect_time">
        <th mat-header-cell *matHeaderCellDef>页面重定向时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.redirect_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="unload_time">
        <th mat-header-cell *matHeaderCellDef>unload时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.unload_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="request_time">
        <th mat-header-cell *matHeaderCellDef>request请求耗时</th>
        <td mat-cell *matCellDef="let element">
          {{ element.request_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="ready_time">
        <th mat-header-cell *matHeaderCellDef>页面准备时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.ready_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="create_time">
        <th mat-header-cell *matHeaderCellDef>页面请求时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.create_time | date: 'yyyy-MM-dd hh:mm:ss' }}
        </td>
      </ng-container>

      <ng-container matColumnDef="start">
        <th mat-header-cell *matHeaderCellDef>操作</th>
        <td
          mat-cell
          *matCellDef="let element"
          (click)="onDetailClicked(element); $event.stopPropagation()"
        >
          详情
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns"
        (click)="onRowClicked(row)"
      ></tr>
    </table>
  </div>

  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div>
